<template>
  <div class="fliter-container">
    <el-form
      ref="formRef"
      :inline="true"
      :model="formDataConfig"
      class="demo-form-inline"
      label-position="right"
    >
      <el-row justify="space-between" align="top">
        <el-col :span="20">
          <el-row>
            <el-col :span="8"
            style="margin-top:20px;"
              v-for="(item, index) in formDataConfig.slice(
                0,
                conditionFold ? conditionInitShowLength : formDataConfig.length
              )"
              :key="item.key"
            >
              <el-form-item :label="item.label" :prop="`[${index}]value`" label-position="right">
                <el-date-picker
                style="width:100%;"
                  v-if="item.type === 'date' || item.type === 'daterange'"
                  v-model="item.value"
                  type="daterange"
                  value-format="YYYY年MM月DD日"
                    @change="dateTimeChange"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间"
                    range-separator="—"
                />
                <el-input
                style="width:100%"

                  v-if="item.type === 'input' || !item.type"
                  v-model="item.value"
                  :placeholder="item.placeholder"
                  clearable
                />
                <el-select
                    style="width:100%"
                  v-if="item.type === 'select'"
                  v-model="item.value"
                  :placeholder="item.placeholder"
                  clearable
                  @change="selectChange"
                >
                  <el-option
                    v-for="option in item.options"
                    :key="option.value"
                    :label="option.name"
                    :value="option.value"
                  />
                </el-select>
                <el-cascader
                  style="width:100%"
                  v-if="item.type === 'cascader'"
                  :options="item.options"
                  @change="handleChange"
                  v-model="item.value"
                  :placeholder="item.placeholder"
                ></el-cascader>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="4" style="display: flex;justify-content: flex-end;padding-top: 20px">
          <el-form-item>
            <el-button type="primary" @click="onSubmit(formRef)">筛选</el-button>
            <el-button type="default" @click="resetForm(formRef)">恢复默认</el-button>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row  justify="center" >
        <el-button
        class="mt-10 mb-10"
          v-if="formDataConfig.length > conditionInitShowLength"
          type="primary"
          link
          @click="areConditionFold(conditionFold)">
          <span style="font-size: 14px;margin-right: 5px;color: #03BF8F;">
            {{ conditionFold ? "更多筛选" : "收起筛选" }}
          </span>
          <ft-icon v-if="conditionFold" name="iconfont icon-gengduoshaixuan" color="#03BF8F" size="12px" />
          <ft-icon  v-else name="iconfont icon-gengduoshaixuan-copy" color="#03BF8F" size="12px" />
        </el-button>
        <div v-else class="mb-20"></div>
      </el-row>
    </el-form>
  </div>

</template>

<script setup>
const conditionInitShowLength = 3;
const areConditionFold = (val) => {
	emits("areConditionFold", val);
}; 
const formRef = ref();
const emits = defineEmits(["onSubmit","resetForm","areConditionFold"]);
const props = defineProps({
  formDataConfig: {
    // 筛选入参
    type: Array,
    default: () => [],
  },
  conditionFold: {
    type: Boolean,
    default: () => true,
  },
});
// 筛选
const onSubmit = (val) => {
    val = props.formDataConfig
	emits("onSubmit", val);
}
// 恢复默认
const resetForm = (val) => {
    val = props.formDataConfig
	emits("resetForm", val);
}
const dateTimeChange = (val) => {
//   console.log(val);
}
// 下拉选择
const selectChange = (val) => {
//   console.log(val);
}
// 级联选择
const handleChange = (val) => {
  console.log(val);
}

</script>

<style lang="scss" scoped>
.fliter-container{
    background-color: #EFF6FE;
    padding-right: 20px;
}
:deep(.el-form--inline .el-form-item){
    margin-right: 0px;
}
:deep(.el-form-item__label){
    color:$main-color;
}
:deep(.el-form--inline .el-form-item){
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}
:deep(.el-form-item__label){
    width:30%;
    padding-right: 10px;
}
:deep(.el-form-item__content){
    width:70%
}
:deep(.el-select) {
  font-size: 14px;
  color: $main-color;
}
:deep(.el-form .el-form-item__content .el-input__wrapper .el-input__inner){
  font-size: 14px;
  color: $main-color;
}
:deep(.el-date-table td.in-range .el-date-table-cell) {
  background-color: rgba(245, 109, 28, 0.1);
}
:deep(.el-date-editor .el-range__icon) {
  display: none;
}
:deep(.el-date-editor .el-range__close-icon--hidden) {
  display: none;
}
:deep(.el-select__wrapper) {
    border-radius: 4px;
    border: 1px solid #D8D8D8;
    box-shadow: none;
    --el-text-color-placeholder: #7E7E7E;
}
</style>
